<template>
    <rx-dialog @handOk="handleSubmit($event,false)" @cancel="cancel">
        <template #toolbar>
            <a-button v-show="mdl.mode==='on-line'" @click="handleSubmit($event,true)">
                {{i18n("list.DesignTemplate","设计模板")}}
            </a-button>
        </template>
        <rx-layout class="word-layout">
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" layout="vertical">
                    <a-form-model-item  :label="i18n('form.mode','模式')" prop = "mode">
                        <a-radio-group name="radioGroup" v-model="mdl.mode" @change="modeChange">
                            <a-radio value="on-line">
                                {{i18n("modeMap.online","在线")}}
                            </a-radio>
                            <a-radio value="off-line">
                                {{i18n("modeMap.offline","离线")}}
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>

                    <a-form-model-item :label="i18n('form.templateName','模板名称')" prop="templateName">
                        <a-input :placeholder="i18n('form.templateName','请输入模板名称','input')" v-model="mdl.templateName"/>
                    </a-form-model-item>
                    <div class="x-word-row" v-if="mdl.mode==='off-line'">
                        <span class="x-sign">1</span>
                        <div class="x-word-content">
                            <div class="x-word-text">{{i18n('form.createTemplates','制作模板')}}</div>
                            <div class="x-module-box">
                                <ul>
                                    <li>
                                        <i18n path="wordTemplate.form.templateTip1" tag="span">
                                            <a place="comparisonTable" href="https://alidocs.dingtalk.com/i/nodes/7NkDwLng8Z9mEqdAsr9lvZaEJKMEvZBY?corpId=&doc_type=wiki_doc&rnd=0.030472572812769494" target="_blank">{{i18n("form.comparisonTable","字段代码对照表")}}</a>
                                        </i18n>
                                    </li>
                                    <li>{{i18n('form.templateTip2','打印时会将已上传模板中的「字段代码」替换为对应数据的实际值')}}</li>
                                </ul>
                            </div>
<!--                            <div class="x-word-btn" style="margin-bottom: 10px;">-->
<!--                                <a-button @click="openFieldCode"-->
<!--                                          style="width: 240px;color: #40a9ff;background-color: #fff;border-color: #40a9ff;"-->
<!--                                >字段代码对照表</a-button>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="x-word-row" v-if="mdl.mode==='off-line'">
                        <span class="x-sign">2</span>
                        <div class="x-word-content">
                            <div class="x-word-text">{{i18n('form.uploadTemplate','上传模板')}}</div>
                            <div class="x-module-box">
                                {{i18n('form.templateTip3','请把在本地编辑好的word打印模板上传')}}
                            </div>
                            <div class="x-word-btn">
                                <rx-attach-component
                                    ref="file"
                                    class="word-upload-btn"
                                    v-model="fileList"
                                    fileType="word"
                                    :multiple="false"
                                    :length="1"/>
                            </div>
                        </div>
                    </div>
                    <rx-attach-component v-else-if="fileList.length > 0 && mdl.mode ==='on-line'" v-model="fileList" fileType="word" :readonly="true"></rx-attach-component>

                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import FormWordTemplateApi from '@/api/form/core/formWordTemplate'
import {RxDialog, BaseFormModel, RxAttachComponent, Util,TokenUtil} from "@lowcode/jpaas-common-lib";
import {ntkoBrowser} from "@/components/iweboffice/officecontrol/ntkobackground.min";
import SysFileApi from "@/api/system/core/sysFile";
import FormWordFieldComparisonTable from "@/views/modules/form/core/FormWordFieldComparisonTable";


export default {
    name: 'FormWordTemplateEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
        RxAttachComponent
    },
    props:["boDefId","boDefName"],
    data() {
        return {
            rules: {
                mode: [{required: true, message: this.i18n('form.mode',"请选择模式",'input'), trigger: 'change'}],
                templateName: [{required: true, message: this.i18n('form.templateName',"请输入模板名称",'input'), trigger: 'change'}],
                template: [{required: false, message: this.i18n('form.template',"请输入模板",'input'), trigger: 'change'}],
                fileId: [{required: false, message: this.i18n('form.wordTemplate',"请选择Word模板文件",'select') , trigger: 'change'}],
            },
            current:0,
            fileList:[],
        }
    },
    created() {
    },
    methods: {
        openFieldCode(){
            let config = {
                curVm:this,
                title:`<div style="font-weight:bold;">`+this.i18n('form.uploadTemplate','字段代码对照表')+`</div>`,
                max:true,
                component:FormWordFieldComparisonTable
            }
            Util.open(config,()=>{})
        },
        i18n(name,text,key){
            return this.$ti18(name,text,"wordTemplate",key);
        },
        get(id) {
            debugger
            return FormWordTemplateApi.get(id);
        },
        save() {
            debugger
            return FormWordTemplateApi.save(this.mdl);
        },
        onload_(values){
            if(!values){
                //初始化默认值
                this.$set(this.mdl,"mode","on-line");
                this.$set(this.mdl,"boId",this.boDefId);
                this.$set(this.mdl,"boName",this.boDefName);
            }else {
                //离线模式模板文件必填
                if(values.mode=='off-line'){
                    this.rules.fileId[0].required=true;
                }
                if(values.fileId){
                    var self=this;
                    SysFileApi.getByFileId(values.fileId).then(res=>{
                        self.fileList.push({
                            fileId:res.fileId,
                            name:res.fileName,
                            size: res.totalBytes,
                            createTime:res.createTime,
                            createBy:res.createBy
                        })
                    })
                }
            }
        },
        modeChange(e){
            //离线模式模板文件必填
            this.rules.fileId[0].required=e.target.value=='off-line'?true:false;
        },
        handleSubmit(vm,isDesign){
            var self=this;
            if(this.fileList && this.fileList.length>0){
              this.$set(this.mdl,"fileId",this.fileList[0].fileId);
              this.$set(this.mdl,"fileName",this.fileList[0].name);
            }else {
              this.$set(this.mdl,"fileId","");
              this.$set(this.mdl,"fileName","");
            }
            this.$refs.form.validate(valid => {
                if (valid) {
                    self.save(self.mdl).then(res => {
                        if (res.success && res.code == 200) {
                            if(isDesign){
                                self.goToOffice(res.data);
                            }
                            Util.closeWindow(self, "ok");
                        }
                        vm.loading = false ;
                    })
                }else {
                    vm.loading = false ;
                }
            });
        },
        goToOffice(values){
            let ntkoed = ntkoBrowser.ExtensionInstalled(); //判断插件是否安装
            var accessToken = TokenUtil.getToken();
            if (ntkoed) {
                var url = "/office/ntkoOfficeWordFields?pkId="+values.pkId;
                url = url + "&isversion=false" +
                    "&fileId=" + (values.fileId?values.fileId:"") +
                    "&docName=" + (values.templateName?values.templateName:"") +
                    "&accessToken=" + accessToken;
                ntkoBrowser.openWindow(url, true);
            }
        },
    },
}
</script>
<style>
.relick a {
    margin-right: 10px;
}

.x-sign{
    display: inline-flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(66, 133, 244, 1);
    color: #fff;
    border: 2px solid #fff;
    position: relative;
    z-index: 2;
}
.x-module-box ul,
.x-module-box li{
    list-style: inside;
    margin: 0;
    padding: 0;
}

.x-word-row{
    display: flex;
    position: relative;
    margin-top: 1px;
}
.x-word-row::before{
    content: '';
    position: absolute;
    top: 10px;
    width: 1px;
    height: 100%;
    left: 12px;
    border-right: 1px dashed rgba(66, 133, 244, 1);
    z-index: 0;
}
.x-word-row:last-child:before{
    top: auto;
    bottom: 100%;
    height: 0;
}
.x-word-content{
    flex: 1;
    margin-left: 10px;
}
.x-module-box{
    margin-top: 10px;
    background: rgba(239, 245, 255, 1);
    padding: 10px 12px;
}
.x-word-text{
    line-height: 24px;
    font-weight: bold;

}
.x-word-btn{
    padding-top: 14px;
}
.word-layout  .ant-form-item-label{
    font-weight: bold;
}
.word-upload-btn .uploader .uploader-btn,
.word-upload-btn .uploader .uploader-btn:hover{
    background-color: #4d9eff;
    color: #fff;
    border-color:#4d9eff ;
}
</style>

